import React, { memo } from "react";
import Taro from "@tarojs/taro";
import { Button } from "@tarojs/components";
import { IconFont } from "@/components";

import "./index.scss";

type BackProps = {
  onBack?: (cb: typeof Taro.navigateBack) => void | ReturnType<typeof Taro.navigateBack>;
  style?: React.CSSProperties;
  className?: string;
};

const _Back: React.FC<BackProps> = ({ style = {}, className = "", onBack }) => {
  const handleClick = () => {
    if (onBack) {
      onBack(Taro.navigateBack);
    } else {
      Taro.navigateBack();
    }
  };
  return (
    <Button
      className={`btn-circle-ab ${className}`}
      onClick={handleClick}
      style={style}
      hoverClass="btn-circle-ab_active"
      hoverStyle={{ opacity: 0.6 }}
    >
      <IconFont name="arrow-lift" size={68} />
    </Button>
  );
};

export const Back = memo(_Back);
